<template>
    <div class="box">
        <h4>组件B</h4>
        <p>vuex msg :{{ msg }}</p>
        <!-- <input type="text" :value="msg" @input="setMsg($event.target.value)"> -->
        <input type="text" v-model="msg">
        <p>vuex user( <input type="button" value="点击更新" @click="initUser('33333333')"> ) : {{ user }}</p>
    </div>
</template>

<script>

// {
//     msg:function(){
//         return this.$store.state.msg
//     }
// }
// {
//     setMsg:function(nv){
//         this.$store.commit("setMsg",nv)
//     }
// }
import { mapState,mapMutations,mapActions } from "vuex";
export default {
    // computed:{
    //     ...mapState(["msg"])
    // },
    // methods:{
    //     ...mapMutations(["setMsg"])
    // }
    computed:{
        ...mapState(["user"]),
        msg:{
            get:mapState(["msg"]).msg,
            set:mapMutations(["setMsg"]).setMsg
        }
    },
    methods:{
        ...mapActions(["initUser"])
    }
}
</script>

<style scoped>
.box{
    min-height: 400px;
    border: 4px dashed #ccc;
}
</style>